<!DOCTYPE html>
<html>
<head>
    <:include file="../common/css.html" title="缴费记录"/>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card card-box-shadow">
    	<div class="layui-card-body">
    	    <!-- 表格工具栏 -->
	        <form class="layui-form toolbar" lay-filter="payHistoryTbSearchForm">
	            <div class="layui-form-item">
	                <div class="layui-inline">
	                    <label class="layui-form-label w-auto">卡片：</label>
	                    <div class="layui-input-inline mr0">
	                        <input name="card" class="layui-input search_key" type="search" placeholder="名称"/>
	                    </div>
	                </div>
	                <div class="layui-inline">
	                    <label class="layui-form-label w-auto">名称：</label>
	                    <div class="layui-input-inline mr0">
	                        <input name="customerName" class="layui-input search_key" type="search" placeholder="名称"/>
	                    </div>
	                </div>
	                <div class="layui-inline">
	                    <label class="layui-form-label w-auto">类型：</label>
	                    <div class="layui-input-inline mr0">
                        <select id="typeSearch" name="type" lay-filter="typeSearch" lay-verify="" lay-search="">
                          <option value="">请选择</option>
                          <option value="停报">停报</option>
                          <option value="缴费">缴费</option>
                          <option value="开口费">开口费</option>
                          <option value="预付款">预付款</option>
                          <option value="退款">退款</option>
                        </select>
	                    </div>
	                </div>
	                <div class="layui-inline">
	                    <button class="layui-btn icon-btn" lay-filter="payHistoryTbSearch" id="payHistoryTbSearch" lay-submit>
	                        <i class="layui-icon">&#xe615;</i>搜索
	                    </button>
<!--                        <button id="btnAdd" type="button" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>-->
	                </div>
	            </div>
	        </form>
	        <!-- 数据表格 -->
        	<table id="payHistoryTable" lay-filter="payHistoryTable"></table>
        </div>
    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="payHistoryTbBar">
	<% if(so.hasPermission("customer:payHistory:update")){ %>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <% } %>
    <% if(so.hasPermission("customer:payHistory:remove")){ %>
    <a class="layui-btn layui-btn-danger layui-btn-xs"
       data-dropdown="#payHistoryTbDelDrop{{d.LAY_INDEX}}" no-shade="true">删除</a>
    <% } %>
    <div class="dropdown-menu-nav dropdown-popconfirm dropdown-top-right layui-hide"
         id="payHistoryTbDelDrop{{d.LAY_INDEX}}"
         style="max-width: 200px;white-space: normal;min-width: auto;margin-left: 10px;">
        <div class="dropdown-anchor"></div>
        <div class="dropdown-popconfirm-title">
            <i class="layui-icon layui-icon-help"></i>
            确定要删除{{d.customerName}}吗？
        </div>
        <div class="dropdown-popconfirm-btn">
            <a class="layui-btn" btn-cancel>取消</a>
            <a class="layui-btn layui-btn-normal" lay-event="del">确定</a>
        </div>
    </div>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="payHistoryEditDialog">
    <form id="payHistoryEditForm" lay-filter="payHistoryEditForm" class="layui-form model-form">
        <input name="id" id="id" type="hidden"/>
        <input name="companyId" type="hidden"/>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md4 layui-hide">
                <label class="layui-form-label layui-form-required">客户id</label>
                <div class="layui-input-block">
                   <input id="customerId" name="customerId" type="text" class="layui-input" autocomplete="off"
                   lay-verType="tips" lay-verify="" placeholder="请输入客户id"/>
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label layui-form-required">姓名</label>
                <div class="layui-input-block">
                   <input id="customerName" name="customerName" type="text" class="layui-input" autocomplete="off"
                   lay-verType="tips" lay-verify="" placeholder="请输入姓名"/>
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label layui-form-required">类型</label>
                <div class="layui-input-block">
                   <input id="type" name="type" type="text" class="layui-input" autocomplete="off"
                   lay-verType="tips" lay-verify="" placeholder="请输入类型"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md4">
                <label class="layui-form-label layui-form-required">金额</label>
                <div class="layui-input-block">
                   <input id="price" name="price" type="text" class="layui-input" autocomplete="off"
                   lay-verType="tips" lay-verify="" placeholder="请输入金额"/>
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label layui-form-required">缴费时间</label>
                <div class="layui-input-block">
                   <input id="payTime" name="payTime" type="text" class="layui-input" autocomplete="off"
                   lay-verType="tips" lay-verify="" placeholder="请输入缴费时间"/>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <label class="layui-form-label layui-form-required">违规照片:</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="violations_pic">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <input id="violations" name="picAdd" type="text" class="layui-input layui-hide" autocomplete="off"
                       lay-verType="tips" lay-verify="" placeholder=""/>
                <input id="violationsRemove" name="picRemove" type="text" class="layui-input layui-hide" autocomplete="off"
                       lay-verType="tips" lay-verify="" placeholder=""/>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" id="violations_pic_address"></div>
                </blockquote>
            </div>
        </div>
        <div class="layui-col-md12">
            <label class="layui-form-label layui-form-required">备注:</label>
            <div class="layui-input-block">
                <textarea name="remark" id="violationsRemark" placeholder="请输入备注" class="layui-textarea"
                          maxlength="300"></textarea>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="payHistoryEditSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="payHistoryPicTbBar">

{{#
layui.each(d.picAdd.split(","), function(index, item){
if(item!=null && item != ''){
}}
<img data-index="{{index}}" data-src="/file/{{item}}" src="/file/{{item}}" class="tb-img-circle" tb-img alt="" style="height: 24px;"/>
{{#
}
})
}}

</script>
<!-- js部分 -->
<:include file="../common/js.html"/>
<script type="text/javascript">
layui.use(['layer', 'form', 'table', 'tableX', 'util', 'admin','xmSelect','formX','dropdown','laydate','upload'], function () {
let $ = layui.jquery;
let layer = layui.layer;
let form = layui.form;
let table = layui.table;
let tableX = layui.tableX;
let util = layui.util;
let admin = layui.admin;
let formX = layui.formX;
let xmSelect = layui.xmSelect;
let laydate = layui.laydate;
let upload = layui.upload;

top.payHistoryTableReload = function(data_sel){
    insTb.reload();
}

// 渲染表格
let insTb = tableX.render({
    elem: '#payHistoryTable'
    ,url: 'payHistory/page'
    ,page: true
    ,height: 'full-100'
    ,toolbar:true
    // ,toolbar: ['<p>',
    //     <% if(so.hasPermission("customer:payHistory:save")){ %>
    //     '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
    //     <% } %>
    //     <% if(so.hasPermission("customer:payHistory:remove")){ %>
    //     '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
    //     <% } %>
    //     '</p>'].join('')
    ,cellMinWidth: 100
    ,cols: [[
        // {type: 'checkbox'}
        {type: 'numbers'}
        ,{field: "customerId",  title: "客户id", sort: false, hide:true }
        ,{field: "customerName",  title: "姓名", sort: false, hide:false }
        ,{field: "type",  title: "类型", sort: false, hide:false }
        ,{field: "picAdd",  title: "照片", toolbar: '#payHistoryPicTbBar', sort: false, hide:false }
        ,{field: "price",  title: "金额", sort: false, hide:false }
        ,{field: "payTime",  title: "缴费时间", sort: false, hide:false }
        ,{field: "remark",  title: "备注", sort: false, hide:false }
        ,{field: "createTime",  title: "创建时间", sort: false, hide:true ,templet: function (d) {
                return util.toDateString(d.createTime);
            }
        }
        ,{field: "createUser",  title: "创建人", sort: false, hide:true }
        ,{field: "createName",  title: "创建人", sort: false, hide:false }
        ,{field: "updateTime",  title: "更新时间", sort: false, hide:true ,templet: function (d) {
                return util.toDateString(d.createTime);
            }
        }
        ,{field: "updateUser",  title: "更新人", sort: false, hide:true }
        ,{field: "deleted",  title: "del(0正常 1删除)", sort: false, hide:true }
        ,{title: '操作', toolbar: '#payHistoryTbBar', align: 'center', minWidth: 200, fixed: 'right'}
    ]]
});

/* 点击图片放大 */
$(document).off('click.tbImg').on('click.tbImg', '[tb-img]', function () {
    // var imgList = table.cache['customerTable'].map(function (d) {
    //     return {
    //         alt: d.nickName,
    //         src: d.imgUrl || '../../../assets/images/head.jpg'
    //     }
    // });
    // layer.photos({photos: {data: imgList, start: $(this).data('index')}, shade: .1, closeBtn: true});
    let imgList = []
    // console.log($(this).parent().html())
    layui.each($(this).parent().find('img'), function(index,item){
        imgList.push({alt:'照片', src: item.src})
    })
    // console.log(imgList)
    layer.photos({photos: {data: imgList, start: $(this).data('index')}, shade: .1, closeBtn: true,anim: 'kCATransitionFade'});
});

//监听行双击
/*
table.on('rowDouble(payHistoryTable)', function(obj){
    let data = obj.data;
    showEditModel(data);
    // obj.tr.find("a[lay-event=edit]").trigger("click");//会跳出来两个一样的框 这个不好用
    //obj.tr.toggleClass('layui-table-click').siblings().removeClass('layui-table-click');//选中行
});
*/


// 搜索
form.on('submit(payHistoryTbSearch)', function (data) {
    insTb.reload({where: data.field, page: {curr: 1}});
    return false;
});

$('.search_key').bind('keypress',function(event){
    if(event.keyCode == "13")
    {
        $("#payHistoryTbSearch").click();
    }
});

// 工具条点击事件
table.on('tool(payHistoryTable)', function (obj) {
    if ('edit' === obj.event) { // 修改
        showEditModel(obj.data);
    } else if ('del' === obj.event) { // 删除
        doDel(obj);
    }
});

/* 表格头工具栏点击事件 */
table.on('toolbar(payHistoryTable)', function (obj) {
    if ('add' === obj.event) { // 添加
        showEditModel();
    } else if ('del' === obj.event) { // 删除
        let checkRows = table.checkStatus('payHistoryTable');
        if (!checkRows || !checkRows.data || 0 === checkRows.data.length) {
            return layer.msg('请选择要删除的数据', {icon: 2, anim: 6});
        }
        let ids = checkRows.data.map(function (d) {
            return d.id;
        });
        doDel({ids: 'true', id: ids.join(",")});
    }
});

// 添加
$('#btnAdd').click(function () {
    showEditModel();
});

$("body").on("click", ".pic_remove_class", function() {
    const dataset = $(this)[0].dataset
    const datasetSrc = dataset.src
    const picId = dataset.picid
    const picRemoveId = dataset.picremoveid
    let pic_tmp_str = $('#'+picId+'').val()
    pic_tmp_str = pic_tmp_str.replace(','+datasetSrc,'')
        .replace(datasetSrc+',','')
        .replace(datasetSrc,'')
    $(this).parent().parent().remove();
    $('#'+picId+'').val(pic_tmp_str)
    if(dataset.picremoveactual=='true') {
        admin.req('../file/remove', {'path': datasetSrc}, function (res) {
            if (0 === res.code) {
                layer.msg(res.msg, {icon: 1});
                // insTb.reload({page: {curr: 1}});
            } else {
                layer.msg(res.msg, {icon: 2, anim: 6});
            }
        }, 'post');
    } else {
        $('#'+picRemoveId+'').val($('#'+picRemoveId+'').val()+','+datasetSrc)
    }
});
// 显示编辑弹窗
function showEditModel(mData) {
    admin.open({
        type: 1,
        title: (mData ? '修改' : '添加') + '缴费记录',
        maxmin:true,
        closeBtn:1,
        resize: true,
        shade: [0.8, "#393D49"],
        shadeClose:true,
        area:["900px","650px"],
        content: $('#payHistoryEditDialog').html(),
        success: function (layero, dIndex) {
            // 回显表单数据
            form.val('payHistoryEditForm', mData);

            try {
                let ad = mData.picAdd.split(',')
                ad.forEach((index2,item2) => {
                    if(index2==''||index2==undefined){return true}
                    $('#violations_pic_address').append('<span style="position: relative;margin-right: 7px;">' +
                        '<img src="/file/' + index2 +'" alt="照片'
                        +'" class="layui-upload-img" style="width: 150px;height: 150px;"> ' +
                        '<span class="layui-layer-setwin" style="top: -51px;right: 21px;">' +
                        '<a class="layui-layer-ico  layui-layer-close2 pic_remove_class" ' +
                        'data-src="'+index2+'" data-picRemoveActual="false" ' +
                        'data-picId="violations" data-picRemoveId="violationsRemove" '  +
                        'href="javascript:void(0);">' +
                        '</a></span></span> ')
                })
            } catch (e) {
            }
            // 表单提交事件
            form.on('submit(payHistoryEditSubmit)', function (data) {
                let loadIndex = layer.load(2);
                admin.req(mData ? 'payHistory/update' : 'payHistory/save', data.field, function (res) {
                    layer.close(loadIndex);
                    if (0 === res.code) {
                         layer.close(dIndex);
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2, anim: 6});
                    }
                }, 'post');
                $("button[lay-filter='payHistoryEditSubmit']").attr("disabled","disabled");
                setTimeout(function(){$("button[lay-filter='payHistoryEditSubmit']").removeAttr("disabled");}, 1000 );
                return false;
            });
            // 禁止弹窗出现滚动条
            //$(layero).children('.layui-layer-content').css('overflow', 'visible');

            //日期时间选择器
            laydate.render({
                elem: '#payTime'
                ,type: 'datetime'
            });

            //创建一个上传组件
            upload.render({
                elem: '#violations_pic'
                ,url: '../file/upload'
                ,multiple: true
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        // console.log(index, file.name, result)
                        $('#violations_pic_address').append('<span style="position: relative;margin-right: 7px;">' +
                            '<img src="' + result +'" alt="照片'
                            +'" class="layui-upload-img" style="width: 150px;height: 150px;"> ' +
                            '<span class="layui-layer-setwin" style="top: -51px;right: 21px;">' +
                            '<a class="layui-layer-ico  layui-layer-close2 pic_remove_class" ' +
                            'data-src="" data-picRemoveActual="true" ' +
                            'data-picId="violations" data-picRemoveId="violationsRemove" '  +
                            'href="javascript:void(0);" οnclick="removePic(this)">' +
                            '</a></span></span> ')
                            '<img src="'
                    });
                    // this.data = {'name':mData.customerName}
                }
                ,done: function(res, index, upload){ //上传后的回调
                    // console.log(res, index, upload)
                    let violations_pic = ''
                    if($("#violations").val()!=''){
                        violations_pic += $("#violations").val() + ','
                    }
                    $("#violations").val(violations_pic+res.url)

                    $('#violations_pic_address>span:last>span>a')[0].dataset.src=res.url
                }
                ,accept: 'images' //允许上传的文件类型
                ,size: 600  //最大允许上传的文件大小
                //,……
            })

        }
    });
}

// 删除
function doDel(obj) {
    if (obj.ids) {  // 批量删除
        admin.confirm('确定要删除选中数据吗？', function (i) {
            layer.close(i);
            let loadIndex = layer.load(2);
            admin.req('payHistory/remove', obj/*JSON.stringify(obj.ids)*/, function (res) {
                layer.close(loadIndex);
                if (0 === res.code) {
                    layer.msg(res.msg, {icon: 1});
                    insTb.reload({page: {curr: 1}});
                } else {
                    layer.msg(res.msg, {icon: 2, anim: 6});
                }
            }, 'post');
        });
    } else {  // 单个删除
         let loadIndex = layer.load(2);
         $.get('payHistory/remove', {id: obj.data.id}, function (res) {
             layer.close(loadIndex);
             if (0 === res.code) {
                 layer.msg(res.msg, {icon: 1});
                 insTb.reload({page: {curr: 1}});
             } else {
                 layer.msg(res.msg, {icon: 2, anim: 6});
             }
         });
     }
}
});
</script>
</body>
</html>
